<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index2.css"/>
    <link rel="stylesheet" href="css/friendlistpage.css"/>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/swiper_change.css"/>
    <style>
        html,body{
            height:100%;
            box-sizing: border-box;
            position:relative;
        }
        body{
            background: #F6F6F6;
            overflow: hidden;
        }
        #chatbody{
            box-sizing: border-box;
            /*height:100%;*/
            /*padding-top:44px;*/
            /*padding-bottom:90px;*/
            /*overflow: scroll;*/
        }
        .mychatword,.otherchatword{
            overflow: hidden;
            padding:10px;
        }
        .mychatword .word{
            float:right;
            margin-right:4%;
            text-align: left;
        }
        .otherchatword .word{
            float: left;
            margin-left:4%;
        }
        .word{
            max-width:70%;
            width:auto;
            /*border:1px solid #ddd;*/
            font-size: 16px;
            padding:5px;
            border-radius: 5px;
            /*background: #62E051;*/
            background: #A0E75A;
            position:relative;
        }
        .arrow{
            position:absolute;
            right:-30px;
            top:9px;
            width:16px;
            height:0px;
            border:6px solid transparent;
            border-left: 8px solid #A0E75A;
        }
        .mychatword .img{
            float:right;
            margin-right:2%;
        }
        .otherchatword .img{
            float: left;
            margin-left: 2%;
        }
        .otherchatword .word .arrow{
            left:-24px;
            border-right: 8px solid #fff;
            border-left:none;
        }
        .otherchatword .word{
            background: #fff;
        }
        .img{
            width:10%;
            border:1px solid #ddd;
            border-radius: 3px;
        }
        .img img{
            width:100%;
            height:100%;
        }
        /*聊天表情*/
        ul,li{
            list-style:none;
        }
        ul{
            position: absolute;
            width:100%;
            overflow: hidden;
            bottom:46px;
            background:#fff;
            padding:5px;
        }
        ul.hide>li{
            float:left;
            width:30px;
            height:30px;
            padding:3px;
        }
        /*聊天输入框*/
        .main{

        }
        .main>div{
            position:absolute;
        }
        .main>div.addbtn{
            width:30px;
            height:30px;
            left:5px;
            background:url("img/jiahao011.png") no-repeat;
            background-size: 30px;
        }
        .main>div.inputdiv{
            left:41px;
            right:88px;
            border:1px solid #ABB8B8;
            border-radius: 4px;
            height:29px;
            padding:4px;
            box-sizing: border-box;
            bottom:7px;
        }
        .main>div.inputdiv>input{
            border:none;
            width:100%;
            height:100%;
            box-sizing: border-box;
        }
        .main>div.face{
            right:50px;
            top:9px;
            width:30px;
            height:30px;
            background:url("img/face011.png") no-repeat;
            background-size: 27px;
        }
        .main>div#sendword{
            right:5px;
            top:9px;
            border:1px solid #ABB8B8;
            border-radius:4px;
            padding:2px 4px;
            color:#fff;
            background:-webkit-linear-gradient(bottom,#6092F3,#6EA0FF);
            background: -moz-linear-gradient(top, #6092F3 0%, #6EA0FF 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6092F3), color-stop(100%,#6EA0FF));
            background: -webkit-linear-gradient(top, #6092F3 0%,#6EA0FF 100%);
            background: -o-linear-gradient(top, #6092F3 0%,#6EA0FF 100%);
            background: -ms-linear-gradient(top, #6092F3 0%,#6EA0FF 100%);
            background: linear-gradient(to bottom, #6092F3 0%,#6EA0FF 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6092F3', endColorstr='#6EA0FF',GradientType=0 );
        }
        #addimgbtn{
            width:100%;
            height:100%;
            opacity: 0;
        }
        .getimg{
            width:123px;
            border-radius:5px;
        }
        /*好友列表部分确定按钮*/
        #imgchoicedFDokbtn1,#titleok{
            position:absolute;
            right:0;
            top:0;
            height:44px;
            width:44px;
            color:#fff;
            line-height: 44px;
            text-align: center;
        }
        /*搜索框部分*/
        #imgchoicefriend .inputsearchbox,#delfriend .inputsearchbox{
            position: relative;
            z-index: 200;
            background: #fff;
            width: 100%;
            box-sizing: border-box;
        }
        #imgchoicefriend .header_action_buttons,#delfriend  .header_action_buttons{
            padding: 0 20px;
            line-height: 44px;
            font-size: 15px;
            color: #fff;
        }
        #imgchoicefriend .header_action_buttons.mweb_lookup_bar_has_input>div.mweb_lookup_bar_input_wrapper,#delfriend  .header_action_buttons.mweb_lookup_bar_has_input>div.mweb_lookup_bar_input_wrapper{
            left: 20px;
            right: 20px;
            top: 9px;
        }
        #imgchoicefriend .header_action_buttons.mweb_lookup_bar_has_input>div.mweb_lookup_bar_input_wrapper>div.mweb_lookup_bar_input,#delfriend .header_action_buttons.mweb_lookup_bar_has_input>div.mweb_lookup_bar_input_wrapper>div.mweb_lookup_bar_input{
            border: 1px solid #ddd;
            background: #fff url("img/search.png") no-repeat 8px center;
            background-size: 13px;
            height: 33px;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
        }
        #csearchbtn1,#delcsearchbtn1{
            position: absolute;
            top: 2px;
            left: 0;
            width: 25px;
            height: 27px;
            background: transparent;
            z-index: 100;
        }
        #imgchoicefriend .mweb_lookup_bar_input>input,#delfriend .mweb_lookup_bar_input>input {
            color: #999;
            position: absolute;
            left: 30px;
            box-sizing: border-box;
            width: 89%;
        }
        #imgchoicefriend .inputsearchbox>div{
            height:51px;
        }
        #delfriend .inputsearchbox>div{
            height:51px;
        }
        #csearchinput1,#delcsearchinput1{
            height:22px;
            line-height: 22px;
        }
        #a1 .friends,#dela1 .friends{
            border-top:1px solid #DDD;
        }
        /*群聊详情页面*/
        .memberimgplace{
            padding-top:14px;
            background:#fff;
            overflow: hidden;
        }
        .memberimgplace>div{
            float:left;
            margin-top:10px;
        }
        .memberimgplace div.imgbox div{
            width:55px;
            height:55px;
            margin-left:23px;
            overflow: hidden;
            text-align: center;
        }
        .memberimgplace div img{
            width:100%;
            height:100%;
        }
        #addmemberbtn img,#delmemberbtn img{
            width:100%;
            height:100%;
        }
        #addmemberbtn,#delmemberbtn{
            width:55px;
            height:55px;
            margin-left:23px;
            overflow: hidden;
            text-align: center;
            margin-bottom:30px;
        }
        #allchatmember .username{
            height:30px;
            line-height:30px;
            text-align:center;
            color:#969696;
            white-space:nowrap;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            overflow: hidden;
        }
        .chattitleplace{
            padding:20px 15px 20px 15px;
            overflow:hidden;
            background: #fff;
            border-top:23px solid #F6F6F6;
        }
        .chattitleplace div{
            float: left;
        }
        .chattitleplace .chattitleinput{
            float:right;
        }
        .chattitleplace .chattitleinput{
            font-size: 16px;
            text-align: right;
            color:#8E8E8E;
        }
        .chattitle{
            font-size: 18px;
            color:#1A1A1A;
        }
        #memdelbtn{
            padding: 0 15px 20px 15px;
            overflow: hidden;
            border-top: 23px solid #F6F6F6;
        }
        #orderdelbtn>div,#memdelbtn>div{
            height:53px;
            text-align: center;
            line-height: 53px;
            background: #E64240;
            border:1px solid #BB362F;
            border-radius: 4px;
            font-size:20px;
            color:#fff;
            text-shadow: 1px 0 1px #E2AEAF;
        }
        .canclick{
            color:#1AFE18;
        }
        .cannotclick{
            color:#77777A;
        }
        .allchatnametitle{
            padding-top:18px;
            padding-bottom:7px;
            padding-left:20px;
            color:#8A8A8A;
            font-size:15px;
        }
        .changenameinput{
            padding:13px 15px;
            background: #fff;
        }
        #changetitleinput{
            width:100%;
            height:18px;
            line-height: 18px;
            color:#0D0D0D;
            border:none;
        }
        /*主页群聊logo*/
        #showmember{
            background:url("img/teammember.png") no-repeat center;
        }
        /*会话展示框*/
        .mychatword{
            width:100%;
            box-sizing: border-box;
        }
        /*时间部分*/
        .showtime{
            text-align: center;
            width:100%;
            box-sizing: border-box;
            padding-bottom:14px;
        }
        .showtime>span{
            border-radius: 3px;
            padding:3px 5px;
            height:20px;
            color:#fff;
            background:#CECECE;
            font-size:12px;
        }


        textarea.inputdiv {

            /*left: 41px;*/
            /*right: 88px;*/
            float:left;
            margin-left:41px;
            border: 1px solid #ABB8B8;
            border-radius: 4px;
            /*min-height: 29px;*/
            padding: 4px;
            box-sizing: border-box;
            bottom: 7px;
            /*float:right;*/
        }
        .main>div#sendword.cannotclick{
            background: #BDBFC5;
            color:#848486;
            border:1px solid #BDBFC5;
        }
        #digimgplace {
            background: #000000;
            background-position: center;
            background-repeat: no-repeat;
            /* height: 100%; */
            background-image: url("");
            background-size: 100%;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        /*头部群聊名超出隐藏*/
        #chating .page_title.unified{
            max-width:160px;
            white-space:nowrap;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            overflow: hidden;
        }
        #facelist{
            width:100%;
            max-width: 540px;
            min-width:320px;
            bottom:44px;
        }
    </style>
</head>
<body class=" experiment-lookup_bar-on gating-feed_switcher_bar-on mweb  gating-new_mweb_header_logged_out-off" id="chating" style="position: relative">
<!--主页头部-->
<div class="PageWrapper nonav" style="margin-top:0;display:block;" id="mainpagetitle">
    <!-- 头部-->
    <div class="Header ModalHeader">
        <div class="fixed_header" style="position: relative">
            <div class="header_main">
                <button class="mweb_modal_back_button" id="chatpagegobackbtn"></button>
                <div class="page_title unified">
                    <span>主题聊天</span>
                </div>
                <div id="showmember" class="rt" style="width:44px;height:44px;">

                </div>
            </div>
        </div>
    </div>
</div>
<!-- 聊天部分-->
<div id="chatbody" style="position: absolute;top:44px;bottom:45px;left:0;right:0;display:block;overflow: hidden;overflow-y:auto;">
    <!--<div id="showwordplace" style="position: relative;overflow-y:auto;overflow-x: hidden;width:100%;box-sizing: border-box"></div>-->
</div>
<!-- 底部-->
<div class="bottomnav" style="position: absolute;bottom:0;display:block;background:#fff;">
    <div class="main">
        <!-- 上传-->
        <div class="addbtn">
            <input type="file" id="addimgbtn"/>
        </div>
        <!-- 输入框-->
        <!-- <div class="inputdiv">-->
        <!-- <input type="text" id="inputword"/>-->
        <!-- </div>-->
        <textarea id="inputword" class="inputdiv" rows='1' cols="14" style='margin-bottom:7px;'/></textarea>
        <script>
            var wwidth=window.screen.width;
            document.getElementById("inputword").style.width=wwidth-129+"px";
        </script>
        <!-- 表情-->
        <div class="face"></div>
        <!--发送-->
        <div id="sendword" class="cannotclick">
            发送
        </div>

        <div id="facelist" style="display:none;">
            <div id="arrdiv"></div>
            <!--<ul id="faceulplace"></ul>-->
            <div class="swiper-container">
                <div class="swiper-wrapper">

                    <div class="swiper-slide"  id="zerofacepage">

                    </div>

                    <div class="swiper-slide" id="onefacepage">

                    </div>

                    <div class="swiper-slide" id="twofacepage">

                    </div>
                </div>
                <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
                    <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
                    <span class="swiper-pagination-bullet"></span>
                    <span class="swiper-pagination-bullet"></span>
                </div>
            </div>
        </div>
    </div>
</div>
<!--群聊详情页--------------------------------------------------------------------------------------------------------->
<div id="allchatmember" style="display: none">
    <!-- 头部-->
    <div class="Header ModalHeader">
        <div class="fixed_header" style="position: relative">
            <div class="header_main">
                <button class="mweb_modal_back_button" id="allchatmembergoback"></button>
                <div class="page_title unified">
                    <span>聊天信息</span>
                </div>
                <div class="header_action_buttons" id="allchatmemberokbtn" style="height: 100%;text-align:center;color:#fff;line-height:44px;width:44px;">

                </div>
            </div>
        </div>
    </div>
    <!-- 展示群聊成员头像-->
    <div class="memberimgplace">
        <div id="addmemberbtn">
            <img src="img/172931.png"/>
        </div>
        <div id="delmemberbtn" style="display: none;">
            <img src="img/173013.png"/>
        </div>
    </div>
    <!-- 群聊主题-->
    <div class="chattitleplace">
        <div style="width:100%;height:100%;" id="changenamebtn">
            <div class="chattitle">群聊名称</div>
            <div class="chattitleinput">

            </div>
        </div>
    </div>
    <!-- 退出 删除并退出-->
    <div id="memdelbtn">
        <div>
            删除并退出
        </div>
    </div>
</div>
<!--群主修改群名------------------------------------------------------------------------------------------------------->
<div id="changename" style="display: none">
    <!-- 头部-->
    <div class="Header ModalHeader">
        <div class="fixed_header" style="position: relative">
            <div class="header_main">
                <button class="mweb_modal_back_button" id="changenamegoback"></button>
                <div class="page_title unified">
                    <span>群聊名称</span>
                </div>
                <div class="header_action_buttons cannotclick" id="changenameokbtn" style="height: 100%;text-align:center;line-height:44px;width:44px;">

                </div>
            </div>
        </div>
    </div>
    <!-- 出入框-->
    <div>
        <div class="allchatnametitle">群聊名称</div>
        <div class="changenameinput">
            <input type="text" id="changetitleinput"/>
        </div>
    </div>

</div>
<!--添加好友列表页----------------------------------------------------------------------------------------------------->
<div class="PageWrapper nonav" id="imgchoicefriend" style="display:none;margin-top:0;">
    <div class=" has_toolbar">
        <!-- 头部-->
        <div class="Header ModalHeader">
            <div class="fixed_header" style="position: relative">
                <div class="header_main">
                    <button class="mweb_modal_back_button" id="friendgobackbtn"></button>
                    <div class="title page_title unified">
                        选择好友
                    </div>
                    <div class="header_action_buttons" style="height: 100%" id="imgchoicedFDokbtn1">
                        确定
                    </div>
                </div>
            </div>
        </div>
        <!-- 搜索框-->
        <div class="inputsearchbox">
            <div >
                <div class="header_action_buttons mweb_lookup_bar_has_input">
                    <div class="mweb_lookup_bar_input_wrapper ">
                        <div class="mweb_lookup_bar_input" style="min-height: 29px;position:relative;font-size: 14px; color:#BC7F74;">
                            <div id="csearchbtn1"></div>
                            <input type="text" id="csearchinput1" placeholder="搜索"  maxlength="15"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 好友列表部分-->
        <div id="listplace1" style="display: block;">
            <div class="Section">
                <!-- 主列表-->
                <div class="Cell" id="aa">
                    <div id="jinghao" style="display: none">
                        <div class="section_header section_header_gray">
                            <span>#</span>
                        </div>
                    </div>
                </div>
                <!-- 搜索列表-->
                <div class="Cell" id="a1">
                    <div id="jinghao1" style="display: none">
                        <div class="section_header section_header_gray">
                            <span>#</span>
                        </div>
                    </div>
                </div>
                <!--右侧导航条-->
                <div class="rightnav1" style="display: block;">
                    <div id="jinghaobtn1"><a href="#">#</a></div>
                    <div class="zmbtn">A</div>
                    <div class="zmbtn">B</div>
                    <div class="zmbtn">C</div>
                    <div class="zmbtn">D</div>
                    <div class="zmbtn">E</div>
                    <div class="zmbtn">F</div>
                    <div class="zmbtn">G</div>
                    <div class="zmbtn">H</div>
                    <div class="zmbtn">I</div>
                    <div class="zmbtn">J</div>
                    <div class="zmbtn">K</div>
                    <div class="zmbtn">L</div>
                    <div class="zmbtn">M</div>
                    <div class="zmbtn">N</div>
                    <div class="zmbtn">O</div>
                    <div class="zmbtn">P</div>
                    <div class="zmbtn">Q</div>
                    <div class="zmbtn">R</div>
                    <div class="zmbtn">S</div>
                    <div class="zmbtn">T</div>
                    <div class="zmbtn">U</div>
                    <div class="zmbtn">V</div>
                    <div class="zmbtn">W</div>
                    <div class="zmbtn">X</div>
                    <div class="zmbtn">Y</div>
                    <div class="zmbtn">Z</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--删除好友列表------------------------------------------------------------------------------------------------------->
<div class="PageWrapper nonav" id="delfriend" style="display:none;margin-top:0;">
    <div class=" has_toolbar">
        <!-- 头部-->
        <div class="Header ModalHeader">
            <div class="fixed_header" style="position: relative">
                <div class="header_main">
                    <button class="mweb_modal_back_button" id="delfriendgobackbtn"></button>
                    <div class="title page_title unified">
                        选择好友
                    </div>
                    <div class="header_action_buttons" style="height: 100%" id="delimgchoicedFDokbtn1">
                        确定
                    </div>
                </div>
            </div>
        </div>
        <!-- 搜索框-->
        <div class="inputsearchbox">
            <div >
                <div class="header_action_buttons mweb_lookup_bar_has_input">
                    <div class="mweb_lookup_bar_input_wrapper ">
                        <div class="mweb_lookup_bar_input" style="min-height: 29px;position:relative;font-size: 14px; color:#BC7F74;">
                            <div id="delcsearchbtn1"></div>
                            <input type="text" id="delcsearchinput1" placeholder="搜索"  maxlength="15"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 好友列表部分-->
        <div id="dellistplace1" style="display: block;">
            <div class="Section">
                <!-- 主列表-->
                <div class="Cell" id="delaa">
                    <div id="deljinghao" style="display: none">
                        <div class="section_header section_header_gray">
                            <span>#</span>
                        </div>
                    </div>
                </div>
                <!-- 搜索列表-->
                <div class="Cell" id="dela1">
                    <div id="deljinghao1" style="display: none">
                        <div class="section_header section_header_gray">
                            <span>#</span>
                        </div>
                    </div>
                </div>
                <!--右侧导航条-->
                <div class="rightnav1" style="display: block;">
                    <div id="deljinghaobtn1"><a href="#">#</a></div>
                    <div class="zmbtn">A</div>
                    <div class="zmbtn">B</div>
                    <div class="zmbtn">C</div>
                    <div class="zmbtn">D</div>
                    <div class="zmbtn">E</div>
                    <div class="zmbtn">F</div>
                    <div class="zmbtn">G</div>
                    <div class="zmbtn">H</div>
                    <div class="zmbtn">I</div>
                    <div class="zmbtn">J</div>
                    <div class="zmbtn">K</div>
                    <div class="zmbtn">L</div>
                    <div class="zmbtn">M</div>
                    <div class="zmbtn">N</div>
                    <div class="zmbtn">O</div>
                    <div class="zmbtn">P</div>
                    <div class="zmbtn">Q</div>
                    <div class="zmbtn">R</div>
                    <div class="zmbtn">S</div>
                    <div class="zmbtn">T</div>
                    <div class="zmbtn">U</div>
                    <div class="zmbtn">V</div>
                    <div class="zmbtn">W</div>
                    <div class="zmbtn">X</div>
                    <div class="zmbtn">Y</div>
                    <div class="zmbtn">Z</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 大图片-->
<div id="digimgplace" style="display: none;vertical-align: middle;height:100%;"></div>

<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/tohref.js"></script>
<script src="ftnjs/ctoe.js"></script>
<script src="ftnjs/urlnote.js"></script>
<!--环信-->
<script type="text/javascript" src="sdk/webim.config.js"></script>
<script src="sdk/strophe-1.2.8.min.js"></script>
<script src="ftnjs/swiper.jquery.min.js"></script>
<script src="ftnjs/sendfaceftn.js"></script>
<!--<script src="sdk/websdk-1.1.22.js"></script>-->
<!--老文件先连接获取群组信息-->
<!--<script src="js/chatingallpeopleold.js"></script>-->
<!--连接新的文件-->
<script src="http://downloads.easemob.com/downloads/cdn/websdk-1.4.5.min.js"></script>
<script src="js/chatingallpeople.js"></script>
<script>
    //监听textarea 状态
    $('#inputword').bind('input propertychange', function() {
        if(document.getElementById("inputword").value){
            console.log("有内容");
            document.getElementById("sendword").className="";
        }else{
            console.log("没有内容");
            document.getElementById("sendword").className="cannotclick";
        }
    });
    //修改表情区域宽度
    var widthdiv=document.getElementById("facelist");
    var usewidth;
    if(typeof window.getComputedStyle!='undefined'){
        usewidth=window.getComputedStyle(widthdiv,null)["width"];
    }else if(widthdiv.currentStyle){
        usewidth=parseInt(widthdiv.currentStyle["width"]);
    }
    $(".swiper-slide").css("width",usewidth+"px");
</script>
</body>
</html>